<template>
  <view
    class="member-advance"
    :style="[sectionStyle]"
    v-if="showMemberCard"
    @click="gotoMember"
  >
    <view class="advance-left">
      <view class="advance-img">
        <image
          :src="
            memberAdImg ||
            'https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/b81e3fdcdd8306e4b3ea6dae70412fd6d21922e4.png'
          "
        />
      </view>
      <view class="advance-text">{{ beforeBuyText }}</view>
    </view>
    <view class="advance-right">
      <text>{{ $t("diy.toOpen") }}</text>
      <i class="iconfont icon-arrow-right"></i>
    </view>
    <view class="member-card-bg" :style="[memberCardBg]"></view>
  </view>
</template>

<script>
export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  components: {},
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    memberAdImg() {
      return this.propsData.params.memberAdImg;
    },
    showMemberCard() {
      if (this.propsData.params === undefined) {
        return true;
      }
      // return this.propsData.params.showModule;
      return this.propsData.params.showMember;
    },
    beforeBuyText() {
      return this.propsData.params.beforeBuyText;
    },
    memberCardBg() {
      let style = Object.assign({}, this.propsData.params.memberCardCss);
      delete style.padding;
      delete style.borderRadius;
      return style;
    },
    sectionStyle() {
      let style = this.propsData.params.memberCardCss;
      let obj = {
        margin: `0 ${style.padding * 2}rpx`,
        borderRadius: `${style.borderRadius * 2}rpx ${
          style.borderRadius * 2
        }rpx 0 0`,
      };
      return obj;
    },
  },
  methods: {
    gotoMember() {
      this.$utils.toUrl("/user/member/member_center", "navigate");
    },
  },
};
</script>

<style lang="scss" scoped>
.member-advance {
  height: 10.134vw;
  background: linear-gradient(270deg, #303478 0%, #303b93 100%);
  border-radius: 2.67vw 2.67vw 0 0;
  margin: 0 auto;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  padding: 1.86vw 3.2% 0;
  position: relative;
  overflow: hidden;
  z-index: 10;
  .advance-left {
    width: 75.83%;
    display: flex;
    .advance-img {
      width: 8vw;
      height: 4.8vw;
      position: relative;
      z-index: 11;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .advance-text {
      margin-left: 2.13vw;
      font-size: 2.93vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #f8d070;
      max-width: 82%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .advance-right {
    display: flex;
    justify-content: flex-end;
    text {
      font-size: 2.93vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #f8d070;
    }
    .iconfont {
      font-size: 19rpx;
      color: #f8d070;
      position: relative;
      top: 6rpx;
    }
  }

  .member-card-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px 10px 0px 0px;
    background-color: #303478;
  }
}
</style>
